/**
 * Created by yujianfu on 2019/9/9.
 */

import React from 'react'
import {fetchPost} from '../../../utils/request'
import {Table, Form, DatePicker, Button, Select} from 'antd'
const {RangePicker} = DatePicker
const FormItem = Form.Item
const {Option} = Select;
import moment from 'moment'
class AllStatsGroup extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            data: [],
            params: {},
            startDate: null,
            endDate: null
        }
    }

    componentDidMount() {
        this.setState({
            startDate: this.getStartDate(),
            endDate: this.getStartDate()
        });
    }

    getData(startDate, endDate, stageCode) {
        let url = '/collection/stats/all/group';
        fetchPost(url, {
            startDate, endDate,stageCode
        }).then(json => {
            if (json && json.data != null && json.code === 0) {
                var data = json.data;

                var totalNum = 0;
                var totalPaidNum = 0;
                data.map((v, k) => {
                    totalNum += v.totalNum;
                    totalPaidNum += v.paidNum;
                });

                var totalPaidRate = totalPaidNum==0 ?"0.00%":(Math.round(totalPaidNum * 100 / totalNum)+ "%");
                var adminName="SUM";
                data.push({adminName,totalNum, "paidNum": totalPaidNum, "paidRateStr": totalPaidRate});

                this.setState({
                    data: data
                });
            }
        });
    }

    getStartDate() {
        let date = new Date()
        let separator = '-'
        let year = date.getFullYear()
        let month = date.getMonth() + 1
        let strDate = date.getDate()
        if (month >= 1 && month <= 9) {
            month = '0' + month
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = '0' + strDate
        }
        return year + separator + month + separator + strDate
    }

    handleSubmit = (e) => {
        e.preventDefault()
        this.props.form.validateFields((err, fieldsValue) => {
            const rangeValue = fieldsValue['range-picker']
            let startDate = rangeValue[0]
            let endDate = rangeValue[1]
            this.getData(startDate.format('YYYY-MM-DD'), endDate.format('YYYY-MM-DD'), fieldsValue['stageCode'])
        })
    }

    render() {

        const dateFormat = 'YYYY-MM-DD'
        const rangeConfig = {
            rules: [{type: 'array', required: true, message: 'Please select Time!'}],
            initialValue: [moment(this.state.startDate, dateFormat), moment(this.state.startDate, dateFormat)]
        }

        const formItemLayout = {
            labelCol: {
                xs: {span: 24},
                sm: {span: 8},
            },
            wrapperCol: {
                xs: {span: 24},
                sm: {span: 16},
            },
        }


        const {getFieldDecorator} = this.props.form;


        const columns = [
            {
                title: 'AgentName',
                dataIndex: 'adminName'
            },
            {
                title: 'TotalAllocateNum',
                dataIndex: 'totalNum'
            },
            {
                title: 'paidNum',
                dataIndex: 'paidNum'
            },
            {
                title: 'paidRate',
                dataIndex: 'paidRateStr'
            }
        ];


        return (
            <div>
                <div>

                    <Form layout="inline" onSubmit={this.handleSubmit}>
                        <FormItem
                            {...formItemLayout}
                            label="AllocationDate"

                        >
                            {getFieldDecorator('range-picker', rangeConfig)(
                                <RangePicker/>
                            )}
                        </FormItem>

                        <FormItem label="Bucket" hasFeedback>
                            {getFieldDecorator('stageCode', {
                                rules: [{required: true, message: 'select Bucket!'}]
                            })(<Select style={{"width": "80px"}}>
                                <Option value="cashmamaD0">D0</Option>
                                <Option value="cashmamaS1">S1</Option>
                                <Option value="cashmamaS2">S2</Option>
                                <Option value="cashmamaM1">M1</Option>
                                <Option value="cashmamaM2">M2</Option>
                                <Option value="cashmamaM3">M3</Option>
                            </Select>)}
                        </FormItem>


                        <FormItem>
                            <Button type="primary" htmlType="submit">Search</Button>
                        </FormItem>

                    </Form>
                    <br/>
                    <Table columns={columns} dataSource={this.state.data}/>
                </div>
            </div>
        )
    }
}
const a = Form.create()(AllStatsGroup)
export default a